<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="组件通信">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
</script>

<script lang="ts">
  function getDoc() {
    return `
### 核心特点
* 组件直接数据传递时，如果希望传递的数据具有响应式，一定不要直接传基本类型的引用，要传对象或数组的引用。
  * 禁止级别类型: ref(""), ref(true), 会导致使用响应式特点
  * 推荐类型: ref({}), ref([])，依然具有响应式
* 核心掌握
  * 父传子: props 方式
  * 子组件封装: expose 方式
  * UI库组件二次封装: v-bind='$attr' 方式 

`;
  }
</script>
